<template>
	<view style="padding: 15px; background-color: #f1f1f1;">
		<!-- 地址 -->
		<navigator url="/package/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.name}}</text>
						<text class="mobile">{{addressData.phone}}</text>
					</view>
					<text class="address" v-if="addressData.province">{{addressData.province}} {{addressData.city}} {{addressData.county}} {{addressData.detail}}</text>
					<text class="address" v-else>请添加地址</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
		</navigator>
		<!-- 下单的商品 -->
		<view class="">
			<!-- 列表 -->
			<view class="catice-caty" v-for="(item,index) in cartList" :key="index" v-if="item.commodities!=''">
			  <view class="" style="margin-bottom: 15rpx;">
				<van-icon name="shop-o" />&nbsp;
			  	<span>{{item.name}}</span>
			  </view>
			    <view class="item-right" v-for="(a,b) in item.commodities" :key="b">
				<image class="caty-image" :src="a.mainImages[0]" mode=""></image>
				
				<view class="caty-canter">
				<text class="caty-title">{{a.title}}</text>
				<text class="attr">规格:{{a.commoditySpecs.specName}}</text>
				</view>
				<text class="price">¥{{a.commoditySpecs.price}}</text>
				<span style="display: flex; transform: translateY(40px); color: #909399;">x{{a.commoditySpecs.number}}</span>
			    </view>
				<view class="list-cell m-t">
					<text class="cell-tit">配送方式</text>
					<text class="cell-more yticon">同城配送</text>
				</view>
				<view class="list-cell m-t">
					<text class="cell-tit">订单备注</text>
					<text class="cell-more yticon icon-you"></text>
					<input style="display: inline-block; float: right;font-size: 24rpx;" :value="value" placeholder="请输入备注" type="text">
				</view>
			</view>
			<!-- 选择运费扣款方式 -->
			<view class="catice-caty container">
			<u-checkbox-group 
				@change="aaa"
			    iconPlacement="right" 
				shape="circle"
			    placement="row">
				<u-checkbox name="S" activeColor="#ff7144" label="次日达"></u-checkbox>
			</u-checkbox-group>
			 <view class="list-cell m-t">
			 	<text class="cell-tit">运费</text>
				<u-icon name="error-circle" color="#8b8b8b" size="18" @click="popup"></u-icon>
			 	<text class="cell-more yticon" v-if="lantce == true">￥{{freight}}</text>
			 	<text class="cell-more yticon" v-else>￥0</text>
			 </view>
			 <view class="list-cell m-t">
			 	<text class="cell-tit">合计金额</text>
			 	<text class="cell-more yticon">￥{{total}}</text>
			 </view>
			 <view class="list-cell m-t">
			 	<text class="cell-tit">零钱抵扣</text>
			 	<switch class="cell-more yticon" v-model="balance" color="#ff7144" @change="switchChange"></switch>
			 </view>
			 <view class="list-cell m-t">
				 <text class="cell-tit"></text>
			 	<text class="cell-more yticon">￥{{userlist}}</text>
			 </view>
			
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="cart-buton">
			<text class="cety-cellr">合计：<text class="caty-span">￥{{money}}</text></text>
		 <u-button size="small" @click="submiTorder">提交订单</u-button>
		</view>
		<u-popup :show="show" :round="15" mode="center" style="width: 86%; padding: 2%;">
		        <view>
		           <h2 style="text-align: center;">运费详细</h2>
		        </view>
				<view style="margin: 30rpx 0;">如您选择次日达该订单会按照以下情况计费：</view>
				<view>1.订单总金额＜600元，每单收取80元运费；</br>
				2.订单总金额达600~1000元，每单收取50元运费；</br>
				3.订单总金额≥1000元，则免运费；</view>
				<view style="margin: 30rpx 0;">如您默认3日内送达该商品，则不收取运费；</view>
				<view style="margin-bottom: 30rpx;">特殊场景说明：若您的收货地址存在无电梯或卸货距离较远的情况，请与送货师傅沟通商定。</view>
				<button style="border: 1px solid #ff7144; color: #ff7144; border-radius: 25px; background-color: #fff; width: 40%;"
				@click="futec"
				>知道了</button>
			</u-popup>
		   <u-popup :show="show" :round="15" mode="bottom" @close="close" :customStyle="lent" :closeable="true">
		        <Payonent></Payonent>
			</u-popup>
	</view>
</template>

<script>
	import use from '@/http/user.js'
	import Payonent from '@/package/payment/Payonent.vue'
	export default{
		components:{Payonent},
		data(){
			return {
				lent:{
					width:'100%',
					height:'40%'
				},
				type:'',
				show:false,
				value:'',
				userlist:{},
				addressData:{},
				cartList:[],
				listinfo:[],
				balance:false,
				lantce:false,
				total:Number,
				money:Number,
				arr:Number,
				freight:Number,
				info:{
				  totalPrice:'', // 总价
				  addressInfo:{
					  name:'', // 收货认名字
					  phone:'', //收货手机号
					  province:'', // 省
					  city:'', //市
					  county:'' ,//区
					  street:'', //街道
					  detail:'', //详细地址
				  },
				  orderInfos:[], //订单商品信息
				  deliveryAmount:'', // 运费
				  balanceAmount:'', //余额
				  shopCartInfos:[], // 购物车id
				  nextDayDelivery:false,
				}
			}
		},
		onLoad(option) {
			this.cartList = JSON.parse(option.data)
			this.type = option.type
            this.loadecter()
			this.loaddcher()
			this.parsect()
		},
		methods:{
			// 选择零钱抵扣
			switchChange(e){
				this.balance = e.detail.value
				if(this.balance == true){
					if(this.userlist < this.money){
						this.money = this.money - this.userlist
					} else if(this.userlist > this.money){
						if(this.lantce == true){
						if(this.userlist - this.money >= this.freight){
						this.money = 0
						} else{
							this.money = this.freight - (this.userlist - this.money)
						}
						} else{
							this.money = 0
						}
					}
				} else if(this.balance == false){
					if(this.lantce == true){
						this.money = this.arr+this.freight
					} else {
					this.money = this.total
					}
				}
			},
			// 选择次日达
			aaa(detail){
				if(detail.length != 0){
					this.total = this.arr+this.freight
					if(this.balance == true){
						if(this.userlist < this.money){
							this.money = this.money - this.userlist
						} else if(this.userlist > this.money){
							if(this.lantce == true){
							if(this.userlist - this.money >= this.freight){
							this.money = 0
							} else{
								this.money = this.freight - (this.userlist - this.money)
							}
							} else{
								this.money = 0
							}
						}
					} else {
					this.money = this.money+this.freight
					}
					this.lantce = true
				} else{
						this.total = this.arr
					if(this.balance == true){
						if(this.userlist < this.money){
							this.money = this.money - this.userlist
						} else if(this.userlist > this.money){
							if(this.lantce == true){
							if(this.userlist - this.money >= this.freight){
							this.money = 0
							} else{
								this.money = this.freight - (this.userlist - this.money)
							}
							} else{
								this.money = 0
							}
						}
					} else{
					this.money = this.total
					}
					this.lantce = false
				}
			},
			// 地址 
			async loaddcher(){
			const resd = await use.address()
			for(let i = 0; i<resd.data.length;i++){
				if(resd.data[i].isDefault == true){
					this.addressData = resd.data[i]
				}
			}
			 // 零钱抵扣
			 const res = await use.walletbalance()
			 this.userlist = res.data
			},
			// 店铺
			loadecter(){
				for(let i = 0;i<this.cartList.length;i++){
					if(this.cartList[i].commodities.length != 0){
						this.listinfo.push(this.cartList[i])
						}
					}
			},
			// 计算总价
			parsect(){
				let arr = 0
				for(let i =0;i<this.cartList.length;i++){
					let item = this.cartList[i].commodities
					for(let j=0;j<item.length;j++){
						arr += item[j].commoditySpecs.price * item[j].commoditySpecs.number;
					}
				}
				this.total = arr
				this.arr = arr
				this.money = arr
				if(arr<600){
					this.freight = 80
				} else if(arr <1000) {
					this.freight = 50
				} else if(arr > 1000){
					this.freight = 0
				}
			},
			// 提交订单
			async submiTorder(){
				this.info.addressInfo.province = this.addressData.province
				this.info.addressInfo.city = this.addressData.city
				this.info.addressInfo.county = this.addressData.county
				this.info.addressInfo.street = this.addressData.detail
				this.info.addressInfo.detail = this.addressData.detail
				this.info.addressInfo.name = this.addressData.name
				this.info.addressInfo.phone = this.addressData.phone
				for(let i = 0;i<this.listinfo.length;i++){
						let arr = this.listinfo[i]
						for(let j = 0;j<arr.commodities.length;j++){
							let item = arr.commodities[j]
							this.info.orderInfos.push({'commodityId':item.commodityId,
							'specId':item.commoditySpecs.specId,'number':item.commoditySpecs.number,'price':item.commoditySpecs.price})
						}
							if(this.type == 'cart'){
								this.info.shopCartInfos.push({'shopCartId':arr.shopCartId,'shopCartDetailIds':[],"all":true})
								for(let j = 0;j<arr.commodities.length;j++){
									let it = arr.commodities[j]
								this.info.shopCartInfos[i].shopCartDetailIds.push(it.commoditySpecs.shopCartDetailId)
								}
						}
					
				}
				this.info.totalPrice = this.arr
				if(this.lantce == false){
					this.info.deliveryAmount = 0
					this.info.nextDayDelivery = false
				} else{
				this.info.deliveryAmount = this.freight
				this.info.nextDayDelivery = true
				}
				if(this.balance == false){
					this.info.balanceAmount = 0
				} else{
					if(this.userlist >= this.arr){
						this.info.balanceAmount = this.total
					} else{
						this.info.balanceAmount = this.userlist
					}
				}
				const res = await use.commodityoder(this.info)
				if(res.data.errorDesc != null){
				this.$api.msg(res.data.errorDesc.desc);
				} else{
				if(res.data.thirdParty == true){
					// uni.navigateTo({
					// 	url:`/package/payment/payer?id=${res.data.orderId}&price=${this.money}`
					// })
				} else{
					uni.navigateTo({
						url:`/package/money/paySuccess`
					})
				}
				}
			},
			// 查看运费规则
			popup(){
				this.show = true
			},
			futec(){
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 200upx;
	}
	
	.address-section {
		padding: 20px 0;
		background: #fff;
		position: relative;
	    border-radius: 20rpx;
		margin-bottom: 15px;
		.order-content {
			display: flex;
			align-items: center;
		}
		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}
		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}
		.name {
			font-size: 34upx; 
			margin-right: 24upx;
			
		}
		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}
	
		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}
	}
	// 商品列表
	.catice-caty{
		background-color: #fff;
		margin-bottom: 15px;
		border-radius: 20rpx;
		padding: 28rpx 35rpx;
	
	.item-right {
		display: flex;
		position: relative;
		margin-bottom: 20rpx;
		.caty-image{
			width: 90px;
			height: 90px;
			border-radius: 14rpx;
		}
		.caty-canter{
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 30rpx;
			.caty-title{
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.attr {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 80upx;
			}
	
		}
		.price {
			font-size: $font-base + 7upx;
			color: #ff7144;
			height: 40upx;
			line-height: 40upx;
			transform: translateX(30rpx);
		}
	}
	}
   .list-cell{
   	line-height:60upx;
   	position:relative;
   	background: #fff;
   	justify-content: center;
   	&.log-out-btn{
   		margin-top: 40upx;
   		.cell-tit{
   			color: $uni-color-primary;
   			text-align: center;
   			margin-right: 0;
   		}
   	}
   	&.cell-hover{
   		background:#fafafa;
   	}
   	&.b-b:after{
   		left: 30upx;
   	}
   	&.m-t{
   		margin-top: 16upx; 
   	}
   	.cell-more{
   		font-size:30rpx;
   		color:#000;
   		margin-left:10upx;
		float: right;
   	}
   	.cell-tit{
   		font-size: $font-base + 2upx;
   		color: $font-color-dark;
   		margin-right:10upx;
   	}
   	.cell-tip{
   		font-size: $font-base;
   		color: $font-color-light;
   	}
   	switch{
   		transform: translateX(16upx) scale(.84);
   	}
   }
    // 底部提交订单
	.cart-buton{
		width: 100%;
		background-color: #fff !important;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 85px;
		padding-bottom: 85rpx;
		z-index: 999;
		padding-top: 25rpx;
	}
	.u-reset-button{
		background-color: #ff7144 !important;
		width: 30% !important;
		height: 85rpx !important;
		color: #fff !important;
		border-radius: 25px !important;
		float: right !important;
		margin: 0 25rpx 25rpx 25rpx !important;
	}
	.cety-cellr{
		color: #000;
		font-size: 30rpx;
		margin: 25rpx;
		.caty-span{
			color: #ff7144;
			font-size: 21px;
		}
	}
	// 次日答
	.u-checkbox{
		width: 100%;
	}
	.u-icon{
		display: inline-block !important;
	}
	.u-popup__content{
		color: #818080;
		width: 90%;
		padding: 30rpx 5%;
	}
</style>